<template>
  <div class="photo-container">
    <button @click="showDescription" class="btn">地点描述</button>
    <h2 class="photo-title">我的照片</h2>
    <div class="gallery scrollable-gallery">
      <div
        v-for="(photoUrl, index) in photos"
        :key="index"
        class="gallery-item"
        @click="showOptions(index)"
      >
        <img :src="photoUrl" :alt="'Photo ' + (index + 1)" />
      </div>
    </div>
    <button class="add-photo-btn" @click="addPhoto">添加照片</button>
    <div v-if="showOptionsBtn" class="options-btn">
      <button @click="convertStyle">进行风格转换</button>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  props: ['placeId'],
  data() {
    return {
      photos: [],
      showModalIndex: null,
      showOptionsBtn: false
    };
  },
  mounted() {
    this.loadPhotos(this.placeId);
  },
  methods: {
    loadPhotos(placeId) {
      axios.get(`/api/photos/${placeId}`)
        .then(response => {
          this.photos = response.data.photos;
        })
        .catch(error => {
          console.error('Error fetching photos:', error);
        });
    },
    // addPhoto() {
    //   // 实际实现需要处理文件上传逻辑
    //   // 假设已有前端代码处理文件选择
    //   const formData = new FormData();
    //   const imageFile = this.$refs.photoInput.files[0];
    //   formData.append('image', imageFile);

    //   axios.post(`/api/photos/upload/${this.placeId}`, formData, {
    //     headers: {
    //       'Content-Type': 'multipart/form-data'
    //     }
    //   }).then(response => {
    //     this.photos.push(response.data.photoUrl);
    //   }).catch(error => {
    //     console.error('Error uploading photo:', error);
    //   });
    // },
    addPhoto() {
  // 获取文件上传控件的文件
  const formData = new FormData();
  const imageFile = this.$refs.photoInput.files[0]; // 确保模板中有 ref="photoInput"
  formData.append('image', imageFile);

  axios.post(`/api/photos/upload/${this.placeId}`, formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }).then(response => {
    this.photos.push(response.data.photoUrl); // 假设后端返回新上传的照片URL
  }).catch(error => {
    console.error('Error uploading photo:', error);
  });
},
deletePhoto(index) {
  const photoUrl = this.photos[index];
  axios.delete(`/api/photos/delete`, {
    data: { photoUrl, placeId: this.placeId }
  }).then(response => {
    this.photos.splice(index, 1); // 从数组中移除照片
  }).catch(error => {
    console.error('Error deleting photo:', error);
  });
},
    showOptions(index) {
      this.showModalIndex = index;
      this.showOptionsBtn = true;
    },
    
    convertStyle() {
      const photoUrl = this.photos[this.showModalIndex];
      // Assume convertStyle makes an API call and updates the photo URL
      axios.post(`/api/photos/convertStyle`, { photoUrl })
        .then(response => {
          this.photos.splice(this.showModalIndex, 1, response.data.newUrl);
        })
        .catch(error => {
          console.error('Error converting photo style:', error);
        });
    },

    openPhotoInNewTab() {
      const photoUrl = this.photos[this.showModalIndex];
      window.open(photoUrl, '_blank');
    }
  }
};
</script>

<style scoped>  
.photo-container { 
  font-size: 14px;
  margin: 5px 10px 5px 0;
  padding: 5px 10px;
  border: none;
  background-color: rgba(232, 232, 153, 0.438); /* 灰色透明背景 */
  color: white;
  cursor: pointer;
  border-radius: 8px; /* 圆角 */ 
}  
  
.gallery.scrollable-gallery {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  white-space: nowrap;
  padding: 20px 0;
  box-sizing: border-box;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
 

.scrollable-gallery::before {  
  content: "";  
  position: absolute;  
  top: 0;  
  left: 0;  
  right: 0;  
  bottom: 0;  
  background: rgba(74, 84, 79, 0.5); /* 初始背景色，可以根据需要调整 */  
  backdrop-filter: blur(10px); /* 应用模糊效果 */  
  z-index: -1; /* 确保在内容下方 */  
}  
    
  
.gallery-item {  
  flex: 0 0 auto; /* 防止图片项在容器中伸缩 */  
  margin-right: 10px; /* 图片项之间的间距 */  
  max-width: 200px; /* 图片项的最大宽度 */  
  margin:5px; 
  scroll-snap-align: start; /* 启用滚动捕捉时的对齐方式（可选） */ 
}  
  
.gallery-item img {  
  width: 100%;  
  height: auto;  
  display: block;  
}  
  
.add-photo-btn {  
  font-size: 14px;
  margin: 5px 10px 5px 0;
  padding: 5px 10px;
  border: none;
  background-color: rgba(128, 128, 128, 0.5); /* 灰色透明背景 */
  color: white;
  cursor: pointer;
  border-radius: 8px; /* 圆角 */ 
  display: flex;
  align-items: center;
  justify-content: center;
}  
</style>